<template>
	<view class="container">
		<view class="postx" :style="scrollTop>0?'background:#FFF;':''">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view class="flexJusp" style="font-size: 36rpx;font-weight: bold;text-align: center;padding:0 20rpx;"
				:style="'height:'+navigationBarHeight+'px;line-height:'+navigationBarHeight+'px'">
				<view @click="selectCity" class="flex" style="width:120rpx;font-size: 28rpx;font-weight: 500;">
					<view
						style="width: 84rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: center;">
						{{ citydata }}
					</view>
					<image style="width:24rpx;height:24rpx;margin:24rpx 0 0 10rpx;" src="/static/image/01_qs.png">
					</image>
				</view>
				<view>首页</view>
				<view style="width:120rpx;"></view>
			</view>
		</view>
		<scroll-view style="height:calc(100vh - env(safe-area-inset-bottom));" scroll-y refresher-enabled
			:refresher-triggered="isTriggered" @refresherrefresh="onRefresherrefresh" @scrolltolower="onScrolltolower"
			:scroll-top="scrollTop" @scroll="scroll" scroll-with-animation="true">
			<view style="width: 750rpx;background: linear-gradient(228deg, #CCEAFF 0%, #D6FCFF 100%);">
				<view :style="'height:'+statusBarHeight+'px'"></view>
				<view :style="'height:'+navigationBarHeight+'px'"></view>
				<swiper class="banner" :current="currIndex" style="min-height: 110rpx"
					:style="{ height: swiperHeight + 'px' }" @change="changeSwiper" circular :indicator-dots="true"
					:autoplay="swiperAble" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in banner" :key="index" @click="this.$toLink(item.link)">
						<image class="lunimage" @load="index == 0?setSwiperHeight(0):''" :src="item.icon"
							style="border-radius:20rpx;width:100%;height: auto" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view class="flex" @click="notify"
			style="width: 710rpx;height: 80rpx;line-height:80rpx; background: #FFFFFF;border-radius: 12rpx;margin:56rpx 20rpx 18rpx;line-height:80rpx;">
			<image style="width:30rpx;height:36rpx;margin:22rpx 18rpx 0 16rpx;" src="/static/image/01_fv.png"></image>
			<view style="font-size: 26rpx;font-weight: bold;padding-right:18rpx;">消息通知</view>
			<view style="width:2rpx;background-color: #DEDEDE;height:34rpx;margin-top:22rpx;"></view>
			<view style="width:460rpx;">
				<u-notice-bar style="margin-top:6rpx;" mode="vertical" :volume-icon="false" :duration="3000"
					:list="list"></u-notice-bar>
			</view>
			<image style="width:36rpx;height:32rpx;margin-top:24rpx;" src="/static/image/01_g.png"></image>
		</view> -->
			<image @click="placeorder" style="width:750rpx; " mode="widthFix" :src="this.$loadImage('homeXiadan')">
			</image>

			<view style="width: 710rpx;background: #FFFFFF;border-radius: 12rpx;margin: auto; padding: 0rpx 0rpx;">
				<view class="flex" style="padding:20rpx 16rpx 14rpx;position: relative;">
					<image style="width: 70rpx;height: 70rpx;border-radius: 12rpx;" :src="details.icon"></image>
					<view
						style="width: 164rpx;font-size: 28rpx;font-weight: bold;line-height: 70rpx;margin:0 26rpx 0 12rpx;">
						{{ details.nickname || '未登录' }}
					</view>
					<image style="width:400rpx;margin-top:-20rpx;" mode="widthFix"
						:src="this.$loadImage('homeUserMoney')"></image>
					<view class="flex" style="color: #FFF;position: absolute;top:24rpx;right:28rpx;">
						<view @click="coupon"
							style="width: 76rpx;padding-right:16rpx;text-align: center; padding-top: 6rpx;">
							<span style="color: #ffff;">{{ details.number || '0' }}</span>
						</view>
						<view @click="coupon" style="width: 116rpx;padding-top: 6rpx;text-align: center;">
							<span style="color: #ffff;">￥{{ details.money || '0' }}</span>
						</view>
						<view @click="placeorder" style="width:80rpx;height:80rpx;"></view>
					</view>
				</view>
				<!-- <video v-if="viedeoUrl" :src="viedeoUrl"
				style="width: 678rpx;height: 242rpx;border-radius: 16rpx;margin: 0 16rpx;"></video> -->
				<view class="flex" v-if="!buttonList || buttonList.length == 0">
					<view
						style="width: 14rpx;height: 14rpx;background: #1176EF;border-radius:50%;margin: 16rpx 16rpx 0 16rpx;">
					</view>
					<view style="font-size: 26rpx;font-weight: bold">数据概况</view>
				</view>
				<view class="flexJusp" v-if="!buttonList || buttonList.length == 0"
					style="width: 670rpx;height: 128rpx;background: #F6F6F6;border-radius: 16rpx;margin:16rpx auto;font-size:24rpx;">
					<view style="width:33%;text-align: center;" @click="next(1)">
						<view style="font-size: 32rpx;font-weight: bold;padding:20rpx 0 0;">{{ shuju.daifu || '0' }}
						</view>
						<view>待付款订单</view>
					</view>
					<view style="width:33%;text-align: center;" @click="next(2)">
						<view style="font-size: 32rpx;font-weight: bold;padding:20rpx 0 0;">{{ shuju.daibao || '0' }}
						</view>
						<view>待报价订单</view>
					</view>
					<view style="width:33%;text-align: center;" @click="next(4)">
						<view style="font-size: 32rpx;font-weight: bold;padding:20rpx 0 0;">{{ shuju.shangmen || '0' }}
						</view>
						<view>待上门订单</view>
					</view>
				</view>
				<view class="flexJusp" v-if="!buttonList || buttonList.length == 0"
					style="width: 670rpx;height: 128rpx;background: #F6F6F6;border-radius: 16rpx;margin:16rpx auto 0;font-size:24rpx;">
					<view style="width:33%;text-align: center;" @click="next(5)">
						<view style="font-size: 32rpx;font-weight: bold;padding:20rpx 0 0;">{{ shuju.jin || '0' }}
						</view>
						<view>进行中订单</view>
					</view>
					<view style="width:33%;text-align: center;" @click="next(8)">
						<view style="font-size: 32rpx;font-weight: bold;padding:20rpx 0 0;">{{ shuju.ping || '0' }}
						</view>
						<view>待评价订单</view>
					</view>
					<view style="width:33%;text-align: center;" @click="next(6)">
						<view style="font-size: 32rpx;font-weight: bold;padding:20rpx 0 0;">{{ shuju.wan || '0' }}
						</view>
						<view>已完成订单</view>
					</view>
				</view>

				<view class="flex" v-if="buttonList && buttonList.length > 0"
					style="justify-content: space-between;flex-wrap: wrap;row-gap: 20rpx;padding: 0 20rpx 20rpx 20rpx;min-height: 140px">
					<image v-if="item.type == 'imageButton'" v-for="(item,index) in buttonList" :key="index"
						@click="this.$toLink(item.scheme)" :src="item.img"
						style="width: 49%;height: auto;min-height: 70px" mode="widthFix">
					</image>
				</view>

			</view>
			<view style="font-size: 30rpx;font-weight: bold;margin:24rpx 20rpx 16rpx;">附近师傅</view>
			<view
				style="background: #FFFFFF;border-radius: 16rpx;margin:0 20rpx 16rpx;padding:20rpx;position: relative;"
				v-for="(item,index) in shiList" :key="index" @click="detail(item)">
				<view class="flex" style="margin-bottom:16rpx;">
					<image style="width: 96rpx;height: 96rpx;border-radius:50%;" :src="item.icon"></image>
					<view style="margin-left:16rpx;">
						<view style="font-size: 30rpx;font-weight: bold;">{{ item.name }}</view>
						<view style="font-size:24rpx;">累计完工
							<text style="color: #1176EF;font-size:28rpx;font-weight:bold;">{{ item.okorder }}
							</text>
							单
							<text style="margin-left:38rpx;">师傅距离
								<text style="color: #1176EF;font-size:28rpx;font-weight:bold;">{{ item.distance }}
								</text>
								{{item.unit}}
							</text>
						</view>
					</view>
				</view>
				<view style="  width: 638rpx;background: #F6F6F6;border-radius: 16rpx;font-size:24rpx;padding:16rpx;">
					<view style="display: flex;justify-content: center;">
						<view style="width: 120rpx;margin: auto 0">擅长技能：</view>
						<view v-if="item.skillLength !== 0" style="flex: 1;display: flex;flex-wrap:wrap">
							<text
								style="color: #656565;margin-right: 30rpx;border: rgba(0,0,0,0.2) 2rpx solid;border-radius: 10rpx;padding: 2rpx"
								v-for="(item1,index) in item.skill" :key="index">
								{{ item1.kind }}
							</text>
						</view>
						<view v-else style="color: #656565;flex: 1;display: flex;flex-wrap:wrap">暂无</view>
					</view>

					<view style="display: flex;justify-content: center;margin-top: 10px">
						<view style="width: 120rpx;margin: auto 0">擅长领域：</view>
						<view v-if="item.lingyuLength !== 0" style="flex: 1;display: flex;flex-wrap:wrap">
							<text
								style="color: #656565;margin-right: 30rpx;border: rgba(0,0,0,0.2) 2rpx solid;border-radius: 10rpx;padding: 2rpx"
								v-for="(item1,index) in item.lingyu" :key="index">
								{{ item1.kind }}
							</text>
						</view>
						<view v-else style="color: #656565;flex: 1;display: flex;flex-wrap:wrap">暂无</view>
					</view>
				</view>
				<image style="width:98rpx;height:44rpx;position: absolute;top:20rpx;right:-8rpx;"
					src="/static/image/01_fs.png"></image>
				<view
					style="width:98rpx;height:40rpx;position: absolute;top:24rpx;right:-8rpx;text-align: center;line-height:40rpx;font-size:28rpx;color: #FFF;">
					{{ item.allpoints }}
					<text style="font-size:24rpx;">分</text>
				</view>
			</view>
			<view class="loading" v-if="shiList.length">
				<view v-if="loading==1">数据加载中...</view>
				<view v-if="loading==2">没有更多了~~</view>
			</view>
			<view style="height: 60px;"></view>
		</scroll-view>


		<image @click="zhiding" style="width:70rpx;height:70rpx;position: fixed;right:20rpx;bottom:300rpx;"
			src="/static/image/01_nj.png"></image>
		<!--    <view style="height:env(safe-area-inset-bottom);"></view>-->
		<view class="tabbar">
			<view class="flexJusp">
				<view style="color: #1176EF;">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_sy_fill.png"></image>
					<view>首页</view>
				</view>
				<view @click="order">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_dd.png"></image>
					<view>订单</view>
				</view>
				<view @click="placeorder" style="width:130rpx;"></view>
				<view @click="wallet">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_qb.png"></image>
					<view>钱包</view>
				</view>
				<view @click="user">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_wd.png"></image>
					<view>我的</view>
				</view>
				<image @click="placeorder" style="width:130rpx;height:130rpx;position: absolute;left:312rpx;top:-44rpx;"
					:src="this.$loadImage('homeOrderTip')"></image>
				<view @click="placeorder"
					style="font-size: 22rpx;color: #FFFFFF;position: absolute;left:332rpx;top:26rpx;">立即下单
				</view>
			</view>
			<view style="height:env(safe-area-inset-bottom);"></view>
		</view>
	</view>
</template>

<script>
	// import uNoticeBar from "@/components/u-notice-bar/u-notice-bar.vue";
	import {
		systemInfo
	} from '@/https/mixin.js'

	export default {
		mixins: [systemInfo],
		data() {
			return {
				scrollTop: 0,
				banner: [],
				list: [],
				shiList: [],
				shiLists: [],
				details: {},
				viedeoUrl: '',
				shuju: {},
				citydata: '',
				longitude: '',
				latitude: '',

				isTriggered: false,
				pageNum: 1,
				loading: 0,
				skill: [],

				//按钮配置
				buttonList: [],
				oldScrollTop: 0,

				swiperHeight: 0, // 滑块的高度(单位px)
				swiperAble:'',

			}
		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop // 获取当前页面滚动高度
			this.scrollTop = event.scrollTop
		},
		onUnload() {
		  this.swiperAble = false
		},
		onHide() {
		  this.swiperAble = false
		},
		onLoad(e) {
			const encodedScene = e.scene;
			const decodedScene = decodeURIComponent(encodedScene);
			uni.hideTabBar()
			// uni.setStorageSync('openId','oM5y_615TbKo3HaqrvGcEsfadXrE')
			this.getSystemInfo()
			var that = this
			// if (!uni.getStorageSync('citydata')) {
			uni.getLocation({
				type: 'wgs84', //返回可以用于uni.openLocation的经纬度
				success: (res) => {
					that.longitude = res.longitude
					that.latitude = res.latitude
					console.log(res, '----------')
					// that.shifu()
					uni.request({
						header: {
							"Content-Type": "application/text"
						},
						url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
							res
							.longitude + ',' + res.latitude +
							'&key=b6a2663dc83e037455f2074be7ee0a48&radius=1000&extensions=base',
						success(rex) {
							if (rex.statusCode == 200) {
								uni.setStorageSync('longitude', res.longitude)
								uni.setStorageSync('latitude', res.latitude)
								uni.setStorageSync('citydata', rex.data.regeocode.addressComponent
									.district)
								that.citydata = rex.data.regeocode.addressComponent.district
							} else {}
						}
					});
				},
				fail: (rex) => {
					console.log(rex, '------失败')
				}
			});

		},
		onShow() {
			this.shiList = []
			this.pageNum = 1
			this.loading = 0
			this.loads()
			if (uni.getStorageSync('citydata')) {
				this.longitude = uni.getStorageSync('longitude')
				this.latitude = uni.getStorageSync('latitude')
				this.citydata = uni.getStorageSync('citydata')
				this.shifu()
			}
			this.swiperAble = true
		},
		methods: {
			next(e) {
				uni.setStorageSync('orderType', e)
				uni.switchTab({
					url: '/pages/myOrder/myOrder'
				})
			},

			async onRefresherrefresh() {
				// 开始动画
				this.isTriggered = true
				this.pageNum = 1
				this.loading = 0
				this.shiList = []
				await this.shifu()
				// 关闭动画
				this.isTriggered = false
			},
			onScrolltolower() {
				if (this.loading === 2) {
					return;
				}
				this.pageNum++
				this.loading = 1
				this.shifu()
				// console.log(this.shiList)
			},

			shifu() {
				this.getSkill()
				this.$httpapi('fujin', 'POST', {
					pagenum: this.pageNum,
					pagesize: 10,
					longitude: this.longitude,
					latitude: this.latitude,
				}).then(res => {
					if (res.total <= this.shiList.length) {
						this.loading = 2
					}
					this.shiList = [...this.shiList, ...res.data]
					//隐藏加载框
					uni.hideLoading();
					if (res.total <= this.shiList.length) {
						this.loading = 2
					}

					this.shiList.forEach(item => {
						item.skillLength = 0
						item.lingyuLength = 0
						this.skill.forEach(all => {
							if (item.userid === all.userid) {
								item.skill = all.skill
								item.lingyu = all.lingyu
								item.skillLength = item.skillLength = all.skill.length
								item.lingyuLength = all.lingyu.length
							}
						})
					})
				})
			},
			getSkill() {
				this.$httpapi('getAllSkill', 'POST', {}).then(res => {
					this.skill = res.data
				})
			},
			loads() {
				this.$httpapi('getCarousel', 'POST', {
					tag: this.$tag
				}).then(res => {
					this.banner = res.data
				})
				this.list = []
				this.$httpapi('notice', 'POST', {}).then(res => {
					for (let i = 0; i < res.data.length; i++) {
						this.list.push(res.data[i].title)
					}
				})

				this.$httpapi('selectuserinfo', 'POST', {}).then(res => {
					this.details = res.data
				})
				this.$httpapi('xiadan', 'POST', {}).then(res => {
					this.viedeoUrl = res.data
				})
				this.$httpapi('alldata', 'POST', {}).then(res => {
					this.shuju = res.data
				})
				this.$httpapi('getAppConfig', 'POST', {
					appName: this.$tag
				}).then(res => {
					getApp().globalData.appConfig = res.data
					let result = res.data.button.find(item => item.key === 'homeAction')
					if (result) {
						this.buttonList = result.children
					} else {
						this.buttonList = []
					}
				})
			},
			selectCity() {
				var that = this
				uni.navigateTo({
					url: '/pages_user/user/address/address?type=2',
					events: {
						acceptDataFromOpenedPages: (data) => {
							uni.setStorageSync('longitude', data.longitude)
							uni.setStorageSync('latitude', data.latitude)
							uni.setStorageSync('citydata', data.area)
							that.longitude = uni.getStorageSync('longitude')
							that.latitude = uni.getStorageSync('latitude')
							that.citydata = uni.getStorageSync('citydata')
						},
					},
				})
				// uni.navigateTo({
				// 	url: '/pages/index/SelectCity/SelectCitys?name=' + this.citydata
				// })
			},
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				this.$nextTick(() => {
					this.setSwiperHeight(e.detail.current); // 动态设置 swiper 的高度
				});
			},
			/* 动态设置 swiper 的高度 */
			setSwiperHeight(index) {
				const query = uni.createSelectorQuery()
				query.selectAll('.lunimage').boundingClientRect(data => {
					this.swiperHeight = data[index].height
				}).exec();
			},
			coupon() {
				uni.navigateTo({
					url: '/pages/index/coupon/coupon'
				})
			},
			notify() {
				uni.navigateTo({
					url: '/pages/index/Notify/Notify'
				})
			},
			detail(item) {
				uni.navigateTo({
					url: '/pages/index/MasterDetails/MasterDetails?id=' + item.userid
				})
			},
			scroll(e) {
				//记录scroll  位置
				this.oldScrollTop = e.detail.scrollTop
			},
			zhiding() {
				//视图会发生重新渲染
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			order() {
				uni.switchTab({
					url: '/pages/myOrder/myOrder'
				})
			},
			wallet() {
				uni.switchTab({
					url: '/pages/wallet/wallet'
				})
			},
			placeorder() {
				uni.switchTab({
					url: '/pages/PlaceOrder/PlaceOrder'
				})
			},
			user() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FA;
	}

	.container {
		//padding-bottom: 150rpx;

		.postx {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999999;
		}

		.banner {
			margin: 20rpx auto 0;
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
		}

		.loading {
			text-align: center;
			font-size: 26rpx;
			color: #888;
			height: 100rpx;
			line-height: 80rpx;
		}

		.tabbar {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9999;
			width: 650rpx;
			background-color: #FFF;
			color: #9EA3AE;
			font-size: 24rpx;
			padding: 6rpx 50rpx;
			line-height: 36rpx;
			box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.10);
			text-align: center;
		}
	}
</style>
